<template>
  <div>
    <!-- 头 -->
    <userTitel :title="title"></userTitel>

    <!-- 卡片1 -->
    <el-card shadow="never" style="padding-left: 45px">
      <el-form :inline="true">
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="线路编号 :">
              <el-input
                v-model="formObj.number"
                style="width: 390px"
                placeholder="请输入线路编号"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="线路名称">
              <el-input
                v-model="formObj.name"
                style="width: 390px"
                placeholder="请输入线路名称"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="起始地机构 :">
              <el-select
                @clear="handleClear"
                v-model="formObj.startOrganName"
                style="width: 390px"
                placeholder="请选择起始地机构"
              >
                <el-option
                  hidden
                  :value="formObj.startOrganName"
                  :label="formObj.startOrganName"
                >
                </el-option>
                <el-tree
                  :data="data"
                  :props="defaultProps"
                  :expand-on-click-node="false"
                  :check-on-click-node="true"
                  @node-click="handleNodeClickOne"
                ></el-tree>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <br />

        <el-row>
          <el-col :span="8">
            <el-form-item label="目的地机构 :">
              <el-select
                @clear="handleClear"
                v-model="formObj.endOrganName"
                style="width: 390px"
                placeholder="请选择目的地机构"
              >
                <el-option
                  hidden
                  :value="formObj.endOrganName"
                  :label="formObj.endOrganName"
                >
                </el-option>
                <el-tree
                  :data="data"
                  :props="defaultProps"
                  :expand-on-click-node="false"
                  :check-on-click-node="true"
                  @node-click="handleNodeClickOne"
                ></el-tree>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item>
              <el-button type="primary" @click="so">搜索</el-button>
              <el-button>重置</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-card>

    <!-- 卡片2 -->
    <el-card class="card2" shadow="never" style="margin-top: 20px">
      <el-button type="primary">新增路线</el-button>
      <el-button type="primary">成本设置</el-button>
      <!-- 表格 -->
      <el-table :data="tableData" border style="width: 100%; margin-top: 20px">
        <el-table-column type="expand">
          <!-- <template slot-scope="props"> -->
          <template slot-scope> 表格 </template>
        </el-table-column>
        <el-table-column prop="number" label="线路编号"> </el-table-column>
        <el-table-column prop="name" label="线路名称"> </el-table-column>
        <el-table-column prop="type" label="线路类型"> </el-table-column>
        <el-table-column prop="startOrganName" label="起始地机构">
        </el-table-column>
        <el-table-column prop="endOrganName" label="目的地机构">
        </el-table-column>
        <el-table-column prop="distance" label="距离(千米)"> </el-table-column>
        <el-table-column prop="cost" label="成本(元)"> </el-table-column>
        <el-table-column prop="time" label="预计时间(分钟)"> </el-table-column>
        <el-table-column fixed="right" label="操作">
          <el-link style="color: #41b8ff">修改</el-link>
          <span style="color: #e4e7ec"> | </span>
          <el-link type="primary">删除</el-link>
          <span style="color: #e4e7ec"> | </span>
          <el-link style="color: #41b8ff">增加车次</el-link>
          <!-- <template #default>
            <el-button type="text" size="small">查看</el-button>
            <el-button type="text" size="small">编辑</el-button>
          </template> -->
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <el-row type="flex" justify="center" style="margin-top: 20px">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage4"
          :page-sizes="[10, 20, 30, 50]"
          :page-size="10"
          layout="total, sizes, prev, pager, next, jumper"
          :total="+total"
        >
        </el-pagination>
      </el-row>
    </el-card>
  </div>
</template>

<script>
import { getList } from "@/api/operational-range";
import { getCircuit } from "@/api/line-manage";
export default {
  name: "line-manage",
  data() {
    return {
      title: "线路管理",
      // 树形
      data: [],
      defaultProps: {
        children: "children",
        label: "name",
      },
      // 表单双向绑定
      formObj: {
        number: "", //线路编号
        name: "", //线路名称
        startOrganName: "", //起始地机构
        endOrganName: "", //目的地机构
      },
      // 表格渲染
      tableData: [{}],
      page: {
        page: 1,
        pageSize: 10,
      },
      currentPage4: 1,
      total: 0, //总页树
    };
  },

  created() {
    this.getMechanism();
    // 表格
    this.getListTwo();
  },
  mounted() {},

  methods: {
    // 下拉数据
    async getMechanism() {
      const res = await getList();
      console.log(JSON.parse(res.data));
      this.data = JSON.parse(res.data);
    },
    // 树形
    handleNodeClickOne(data) {
      console.log(data.name);
      // 起始地
      this.formObj.startOrganName = data.name;
      // 目的地
      this.formObj.endOrganName = data.name;
      console.log(this.formObj);
    },
    handleClear() {
      this.name = "";
    },

    // ----
    // 查找
    async so() {
      console.log("查找");
      const res = await getCircuit(this.formObj);
      // console.log(res);
      this.tableData = res.data.items;
    },

    // 表格列表
    async getListTwo() {
      const res = await getCircuit(this.page);
      console.log(res);
      this.tableData = res.data.items;
      // 总页数
      this.total = res.data.counts;
    },

    // 分页
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.page.pageSize = val;
      this.getListTwo();
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.page.page = val;
      this.getListTwo();
    },
  },
};
</script>

<style scoped lang="scss">
.gree {
  margin-right: 5px;
  width: 6px;
  height: 6px;
  display: inline-block;
  background-color: green;
  border-radius: 50%;
}
.red {
  margin-right: 5px;
  width: 6px;
  height: 6px;
  display: inline-block;
  background-color: red;
  border-radius: 50%;
}
::v-deep .el-card {
  text-align: left;
  line-height: 24px;
}

::v-deep.el-tabs.el-tabs--top.el-tabs--border-card {
  margin-top: 20px !important;
  border: 0;
}

::v-deep .el-tabs__nav-scroll {
  margin-bottom: 15px !important;
  background-color: white;
}

::v-deep .el-tabs__item.is-top.is-active {
  background-color: #ffeeeb;
  border: 0;
}

::v-deep .el-tabs--border-card {
  box-shadow: 0 0px 0px 0 rgb(0 0 0 / 12%), 0 0 0px 0 rgb(0 0 0 / 4%);
}

::v-deep .el-tabs__header.is-top {
  border: 0;
}
// ====
::v-deep .el-dialog {
  width: 600px !important;
}
::v-deep .el-dialog__body {
  text-align-last: left;
  line-height: 24px;
}
::v-deep .el-dialog__header {
  text-align-last: left;
  line-height: 24px;
  background-color: #f3f4f7;
}
.block {
  margin: 0 auto;
  margin-top: 10px;
}
::v-deep .el-card__body {
  height: 40px;
  line-height: 12px;
  text-align-last: left;
}
::v-deep .el-tabs--border-card > .el-tabs__content {
  text-align-last: left !important;
  line-height: 12px;
}
::v-deep .el-tabs__nav-scroll {
  line-height: 55px;
}
::v-deep .el-card__body {
  height: 40px;
  line-height: 12px;
  text-align: left;
}

.card2 {
  height: 800px;
}
</style>
